<template>
  <div>
    <table>
      <ol v-for="a in sdate">
        <li>{{ a.Name }}</li>
        <li>{{ a.Age }}</li>
      </ol>
    </table>
    <table>
      <thead class="table table-bordered">
        <tr>
          <td>用户借款金额</td>
          <td>借款用户账号</td>
          <td>借款款型名称</td>
          <td>借款金额</td>
          <td>剩余还款本金</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="b in list">
          <td>{{ b.a }}</td>
          <td>{{ b.b }}</td>
          <td>{{ b.c }}</td>
          <td>{{ b.d }}</td>
          <td>{{ b.e }}</td>
        </tr>
      </tbody>
    </table>
    <input type="text" v-model="text" />
    <p>{{ text }}</p>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue';

let data = reactive({
  sdate: [
    { Name: '张大', Age: 21 },
    { Name: '李尔', Age: 20 },
    { Name: '刘珊', Age: 22 },
    { Name: '钱嗣', Age: 25 },
    { Name: '赵武', Age: 24 },
  ],
  list: [
    { a: 1, b: 'zhangsan', c: '八维助学金', d: 400, e: 0 },
    { a: 2, b: 'zhangsan', c: '八维助学金', d: 10000, e: 10000 },
  ],
  text: '双向绑定演示',
});

let { sdate, list, text } = toRefs(data);
</script>

<style scoped></style>
